<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

  <script type="text/javascript" src="../asset/js/lh.js"></script>
  <script>lh.load()</script>

  <style type="text/css">
    html, body, #app{
      height: 100%;
      margin:0;
      overflow: hidden;
    }
    body{
      background-color: #000;
    }
    #app{
      background-image: url(../asset/image/cover.jpg);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    /*标题和菜单*/
      .title{
        text-align: center;
        padding-top: 13vh;
        font-size: 6vw;
        font-weight: bold;
        color: #fff;
        text-shadow: 0 0 20px #000;
      }
      .menu{
        width: 100%;
        text-align: center;
        position: absolute;
        top: 65vh;
      }
      .menu p{
        margin-top: 10px;
      }
      .menu .button{
        width: 10vw;
        font-size: 1.5vw;
        height: 6vh;
      }

    /*服务器地址输入框*/
      .autocomplete{
        margin:10px 0;
      }
      .autocomplete p{
        margin:0;
        font-size: 16px;
        line-height: 16px;
      }
      .autocomplete p:nth-child(2){
        font-size: 12px;
        line-height: 12px;
      }

    /*更新日志*/
      .log{
        position: absolute;
        width: 100%;
        height: 100%;
        top:0;
        background-color: rgba(0,0,0,0.5);
        overflow-y: scroll;
        box-sizing:border-box;
        padding: 40px 50px 0 0;
      }
      .log p{
        margin: 5px 0;
        font-size: 18px;
      }
      .log h2{
        margin: 0 0 10px 0;
      }
      .el-timeline-item__timestamp.is-top{
        color:#fff;
      }
  </style>
</head>

<body>
  <div id="app" class="animate__animated animate__fadeIn">
    <div class="title">梦幻模拟战2</div>

    <!-- 主菜单 -->
    <div v-if="menu==0" class="menu">
      <p>
        <el-button class="button" @click="menu=1">单人游戏</el-button>
        <el-button class="button" @click="show.netgame=true">多人联机</el-button>
      </p>
      <p>
        <el-button class="button" @click="$refs.menu.show.option=true">选项</el-button>
        <el-button class="button" @click="exit">退出</el-button>
      </p>
    </div>
    <div v-if="menu==1" class="menu">
      <p>
        <el-button class="button" @click="show.newgame=true">新游戏</el-button>
        <el-button class="button" @click="show.loadgame=true">读取游戏</el-button>
      </p>
      <p><el-button class="button" @click="menu=0">返回</el-button></p>
    </div>

    <!-- 存档 -->
    <el-dialog v-model="show.newgame" title="新游戏">
      <el-button @click="newGame(1)">{{save['save1']?save['save1'].name:'存档1'}}</el-button>
      <el-button @click="newGame(2)">{{save['save2']?save['save2'].name:'存档2'}}</el-button>
      <el-button @click="newGame(3)">{{save['save3']?save['save3'].name:'存档3'}}</el-button>
    </el-dialog>
    <el-dialog v-model="show.loadgame" title="读取游戏">
      <div v-if="JSON.stringify(save)!='{}'">
        <el-button v-if="save['save1']" @click="loadGame(1)">{{save["save1"].name}}</el-button>
        <el-button v-if="save['save2']" @click="loadGame(2)">{{save["save2"].name}}</el-button>
        <el-button v-if="save['save3']" @click="loadGame(3)">{{save["save3"].name}}</el-button>
      </div>
      <div v-else>没有存档</div>
    </el-dialog>

    <!-- 多人联机 -->
    <el-dialog v-model="show.netgame" title="多人联机">
      <div style="padding:0 30px 30px 30px;">
        <p>
          <span style="margin-right: 20px;">服务器地址</span>
          <el-autocomplete
            v-model="server"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容">
            <template #default="{ item }">
              <div class="autocomplete">
                <p>{{item.value}}</p>
                <p>{{item.time}}</p>
              </div>
            </template>
          </el-autocomplete>
        </p>
        <p>
          <span style="margin-right: 20px;">选择存档</span>
          <template v-if="JSON.stringify(save)!='{}'">
            <el-button v-if="save['save1']" @click="netGame(1)">{{save["save1"].name}}</el-button>
            <el-button v-if="save['save2']" @click="netGame(2)">{{save["save2"].name}}</el-button>
            <el-button v-if="save['save3']" @click="netGame(3)">{{save["save3"].name}}</el-button>
          </template>
          <template v-else>没有存档</template>
        </p>
      </div>
    </el-dialog>

    <!-- 更新 -->
    <el-button v-if="show.haveUpdate" type="danger" style="font-size: 40px;position: absolute;right: 10vw;bottom: 23vh;" @click="update">游戏有更新</el-button>
    <el-button type="primary" style="font-size: 20px;position: absolute;right: 10vw;bottom: 10vh;" @click="show.log=true">更新日志</el-button>
    <!-- 更新日志 -->
    <div v-if="show.log" class="log">
      <div style="display: flex;justify-content: flex-end;"><el-button type="primary" style="font-size: 16px;margin:0 0 20px 40px;" @click="show.log=false">关闭</el-button></div>
      <el-timeline>
        <el-timeline-item timestamp="2021/3/29" placement="top">
          <el-card>
            <h2>v1.0.2</h2>
            <p>增加装备系统</p>
            <p>增加商店系统</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2021/3/14" placement="top">
          <el-card>
            <h2>v1.0.1</h2>
            <p>完善联机模块</p>
            <p>修复魔法箭</p>
            <p>修复退出按钮</p>
            <p>增加自动更新程序</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2021/3/10" placement="top">
          <el-card>
            <h2>v1.0.0</h2>
            <p>vDemo发布</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2021/1/20" placement="top">
          <el-card>
            <h2>v0.0.0</h2>
            <p>《梦幻模拟战2》重制版项目启动</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>

    <!-- vue组件 -->
    <!-- 菜单 -->
    <loaf-menu ref="menu" @music="changeVolume"></loaf-menu>
    <!-- 背景音乐 -->
    <loaf-music ref="music"></loaf-music>
  </div>

  <script>
    lh.vue({
      data(){
        return{
          show:{
            log:false,
            newgame:false,
            loadgame:false,
            netgame:false,
            haveUpdate:false,
            update:false
          },
          server:'',
          menu:0,
          save:null
        }
      },
      computed:{
        //历史服务器地址
        querySearch(){
          return function(query, cb){
            let res=[]
            let str=[{value: '127.0.0.1:1608',time: '本地测试'},]
            for(let i=0;i<str.length;i++){
              if(str[i].value.indexOf(query)!=-1)res.push(str[i])
            }
            cb(res)
          }
        },
      },
      created(){
        //检查更新
        let env = ipcRenderer.sendSync('getEnv')
        if(env!='test'){
          let version = ipcRenderer.sendSync('getVersion')
          axios.get(version.url+'?name='+version.name).then(o=>{
            if(o.data.code==20&&version.version!=o.data.data.version){
              this.show.haveUpdate=true
            }
            if(o.data.code==40){
              this.$alert(o.data.msg)
            }
          }).catch(e=>{
            this.$alert(error,'检查更新失败')
          })
        }
        
        //获取配置的服务端地址
        this.server=ipcRenderer.sendSync('getConfig').server
        //获取存档
        this.save=ipcRenderer.sendSync('getSave')
      },
      mounted(){
        this.$refs.music.set('../asset/music/开幕.mp3')
      },
      methods:{
        //新游戏
        newGame(i){
          this.$prompt('请输入名称', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPlaceholder:'存档'+i
          }).then(({value})=>{
            if(!value)value='存档'+i
            let arg={r:'new',name:value,id:'save'+i}
            ipcRenderer.send('save',arg)
            lh.toUrl('load.html')
          }).catch(() => {

          })
        },
        //读取游戏
        loadGame(i){
          ipcRenderer.send('load','save'+i)
          let url='shop.html'
          //如果是关卡存档
          let save=ipcRenderer.sendSync('getData','selSave')
          if(!save.shop)url='game.html?type=load'
          lh.toUrl(url)
        },
        //多人联机
        netGame(i){
          if(!this.server){
            this.$message('请输入服务器地址')
            return
          }
          //测试服务器
          let ws = new WebSocket('ws://'+this.server)
          const loading=this.$loading({text: '正在连接服务器',background: 'rgba(0, 0, 0, 0.7)'})
          let timer=setTimeout(()=>{
            ws.close()
          },5000)

          ws.onopen=(o=>{
            ipcRenderer.send('load',i)
            ipcRenderer.send('setData',['server',this.server])
            ipcRenderer.send('saveConfig',['server',this.server])
            //跳转
            loading.close()
            lh.toUrl('hall.html')
          })
          ws.onerror=(o=>{
            loading.close()
            this.$message.error('服务器连接失败')
          })
        },
        changeVolume(type,val){
          if(this.$refs.music)this.$refs.music.volume(type,val)
        },
        update(){
          ipcRenderer.send('update')
        },
        exit(){
          this.$confirm('是否退出游戏', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            ipcRenderer.send('exit')
          }).catch(() => {

          })
        },
      }
    })
  </script>
</body>
</html>